<template>
    <!-- 思维导图构建规划图 -->
    <div class="mindmap">
        <ul class="new-mind-container">
            <li class="mind-node">
                <div class="node-root">
                    <div class="node-root-container" title="需求规划">
                        需求规划 <img class="add" @click="addChild" src="@/assets/svg/ic_add_norm_filled.svg" alt="添加子节点"
                            title="添加子节点">
                    </div>
                    <span :class="toggleIcon ? 'toggle toggle-close' : 'toggle toggle-expand'" @click="toggle_icon">
                    </span>
                </div>
                <!-- 插入子节点 -->
                <mind-node :childrenLevel="childrenLevel" v-if="toggleIcon" :node="rootNode" @delete-child="deleteNodeFromParent" />
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import MindNode from './MindNode.vue';
import { ElNotification } from 'element-plus'

//默认图标展开
let toggleIcon = ref(true)
let childrenLevel = ref(1)

let rootNode = ref([
    {
        id: 1,
        label: '一级节点',
        state:"新建",
        create_time:"2024/09/29 13:35:45",
        children: [
            {
                id: 2,
                label: '二级子节点',
                create_time:"2024/09/29 13:35:45",
                state:"新建",
                children: [
                    {
                        id: 5,
                        label: "三级子节点",
                        create_time:"2024/09/29 13:35:45",
                        state:"新建",
                        children: [
                            //四级子节点信息
                        ]
                    }
                ],
            },
            {
                id: 3,
                label: '二级子节点',
                create_time:"2024/09/29 13:35:45",
                state:"新建",
                children: [],
            }
        ]
    },
    {
        id: 4,
        label: "一级节点",
        create_time:"2024/09/29 13:35:45",
        state:"新建",
        children: [

        ]
    }
]);

//切换展开图标及功能
const toggle_icon = () => {
    if (toggleIcon.value) {
        toggleIcon.value = false
    } else {
        toggleIcon.value = true
    }
}

//添加子节点
const addChild = () => {
    let newNode = { id: Date.now(), label: "新字节点标题", children: [] };
    rootNode.value.push(newNode);
}

//删除当前子节点方法
const deleteNodeFromParent = (nodeToDelete) => {
    if (removeNodeById(rootNode.value, nodeToDelete.id)) {
        ElNotification({
            title: '成功',
            message: '当前节点删除成功',
            type: 'success',
        })
    }
};

// 递归删除算法
// 定义一个递归函数来查找并删除节点
function removeNodeById(nodes, nodeId) {
    for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        if (node.id === nodeId) {
            // 找到匹配的节点，从父节点的 children 数组中移除
            nodes.splice(i, 1);
            return true; // 表示找到了节点并已删除
        } else if (node.children && node.children.length > 0) {
            // 如果当前节点有子节点，递归地在子节点中查找
            const isRemoved = removeNodeById(node.children, nodeId);
            if (isRemoved) {
                return true; // 如果在子节点中找到了并删除，就返回 true
            }
        }
    }
    return false; // 如果没有找到节点，返回 false
}

</script>

<style lang="scss" scoped>
.mindmap {
    position: relative;
    margin: 50px 0;
    //规划图最小宽度
    min-width: 1200px;
    max-width: 1600px;
    overflow-x: auto;
    text-align: left;
    font-family: Arial, sans-serif;
    height: 100%;

    .new-mind-container {
        position: relative;
        display: flex;
        align-items: center;

        .mind-node {
            display: flex;
            flex: 1;
            min-height: 169px;
            align-items: center;
            margin-left: 0px;

            //根据节点
            .node-root {
                position: relative;
                display: flex;
                align-items: center;
                margin: 0;
                width: 25px;
                //min-height: 713px;
                height: 100%;
                padding: 0 18px 0 8px;
                border-radius: 5px;
                font-size: 18px;
                text-align: center;

                .node-root-container {
                    position: relative;
                    overflow-x: hidden;
                    text-overflow: ellipsis;
                    font-weight: 700;
                    padding-bottom: 20px; // 添加底部内边距，为添加图标留出空间
                    min-height: 50px; // 设置一个最小高度，确保容器有足够空间显示图标

                    .add {
                        visibility: hidden;
                        width: 19px;
                        height: 19px;
                        cursor: pointer;
                        position: absolute; // 绝对定位，使其可以相对于 .node-root-container 定位
                        left: 50%; // 水平居中
                        bottom: 0; // 放置在容器的底部
                        transform: translateX(-50%); // 水平居中
                    }

                    //鼠标经过时显示添加按钮
                    &:hover .add {
                        // 修正选择器，现在它是 .node-root-container:hover 的后代选择器
                        visibility: visible; // 当鼠标悬停时可见
                    }
                }

                .toggle {
                    position: absolute;
                    top: 50%;
                    left: 100%;
                    margin-top: -7px;
                    height: 14px;
                    width: 14px;
                    cursor: pointer;
                    z-index: 99;
                    background: url('@/assets/img/common/combine-first.png') no-repeat;
                }

                //展开关闭按钮
                .toggle-close {
                    background-position: 0 -282px;

                    &:hover {
                        background-position: 0 -268px;
                    }
                }

                //展开打开按钮
                .toggle-expand {
                    background-position: 0 -254px;

                    &:hover {
                        background-position: 0 -240px;
                    }
                }
            }
        }
    }
}

</style>